<template>
  <div class="icons-list">
    <icon-font
      :style="{ fontSize: fontSize + 'px' }"
      v-if="iconName === 'icon-duigouxiao'"
      type="icon-duigouxiao"
    />
    <icon-font
      :style="{ fontSize: fontSize + 'px' }"
      v-if="iconName === 'icon-jinrujiantouxiao'"
      type="icon-jinrujiantouxiao"
    />
    <icon-font
      :style="{ fontSize: fontSize + 'px' }"
      v-if="iconName === 'icon-guanbixiao'"
      type="icon-guanbixiao"
    />
    <icon-font
      :style="{ fontSize: fontSize + 'px' }"
      v-if="iconName === 'icon-youji'"
      type="icon-youji"
    />
  </div>
</template>
<script>
import { Icon } from 'ant-design-vue';

const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_3142354_ctlzccxwgea.js',
});
export default {
  data() {
    return {
      fontSize: 24,
    };
  },
  created() {
    // console.log(this.size);
    switch (this.size) {
      case 'small':
        this.fontSize = 16;
        break;
      case 'medium':
        this.fontSize = 24;
        break;
      case 'large':
        this.fontSize = 32;
        break;
    }
  },
  props: {
    iconName: [String],
    size: {
      type: String,
      default: 'medium',
    },
  },
  components: {
    IconFont,
  },
};
</script>

<style scoped>
.icons-list >>> .anticon {
  margin: 0 20px;
  font-size: 24px;
}
</style>
